import React, { useEffect, useState } from 'react';
import marked from 'marked';
import md from '../../markdown/introduction.md';
import 'github-markdown-css';

// eslint-disable-next-line
export default props => {
  const [markdown, setMarkdown] = useState('');
  useEffect(() => {
    marked.setOptions({
      renderer: new marked.Renderer(),
      gfm: true,
      tables: true,
      breaks: false,
      pedantic: false,
      sanitize: false,
      smartLists: true,
      smartypants: false,
    });
    fetch(md)
      .then(res => res.text())
      .then(text => setMarkdown(text));
  }, []);
  return (
    <div className="markdown-body">
      <div
        id="content"
        className="article-detail"
        dangerouslySetInnerHTML={{
          __html: markdown ? marked(markdown) : null,
        }}
      />
    </div>
  );
};
